<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    
<%@ page import ="com.easyattendance.services.AddClassService" %>
<%@ page import ="com.easyattendance.model.Class" %>
<%@ page import ="com.easyattendance.services.AddTeacherService" %>
<%@ page import ="com.easyattendance.model.Teacher" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Manage Student Leaves</title>
<!-- <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> -->

<jsp:include page="../includeFiles.jsp" />

<link rel="stylesheet" href="<%=request.getContextPath()%>/views/css/ui/jquery-ui-1.10.4.custom.min.css">
<script src="<%=request.getContextPath()%>/public/js/ui/jquery.ui.core.js"></script>
<script src="<%=request.getContextPath()%>/public/js/ui/jquery.ui.widget.js"></script>
<script src="<%=request.getContextPath()%>/public/js/ui/jquery.ui.datepicker.js"></script>

<script>
	$(function() {
		$( "#leave_start_date" ).datepicker({
			dateFormat: 'yy-mm-dd'
		});
	});
</script>
<script>
	$(function() {
		$( "#leave_end_date" ).datepicker({
			dateFormat: 'yy-mm-dd'
		});
	});
</script>
<script>
	$(function() {
		$( "#leave_start_date" ).datepicker({
			defaultDate: "+1w",
			changeMonth: true,
			numberOfMonths: 1,
			beforeShowDay: noSunday,
			onClose: function( selectedDate ) {
				$( "#leave_end_date" ).datepicker( "option", "minDate", selectedDate );
			}
		});
		$( "#leave_end_date" ).datepicker({
			defaultDate: "+1w",
			changeMonth: true,
			numberOfMonths: 1,
			onClose: function( selectedDate ) {
				$( "#leave_start_date" ).datepicker( "option", "maxDate", selectedDate );
			}
		});
	});
	function noSunday(date){
		console.log(date);
	    return [date.getDay() != 0, ''];
	};
</script>
</head>
<body class="left-sidebar">

<!-- Session check : user logged in or not/ press back button -->
<jsp:include page="../common/checkSession.jsp" />
<jsp:include page="../common/checkTeacherRole.jsp" />

<!-- Wrapper -->
	<div id="wrapper">

		<!-- Content -->
		<div id="content">
			<div id="content-inner">

				<!-- Login -->
						<div id="login_content">
						<header>
							<h2>Manage Student Leave</h2>
						</header>
						<span class="success_msg">${add_success}</span>
						<span class="error_msg">${add_unsuccess}</span>
						<span class="error_msg">${null_values}</span>
						<div class="submit_errors_msg">
							<ul>
								<li id="submit_is_field_empty" class="submit_errors">All * fields are required.</li>
							</ul>
						</div>
						<% String currentUser = (String) session.getAttribute("currentUser"); %>
						<% 
   						AddClassService addClassService = new AddClassService();
   						String classId = addClassService.getClassIdByTeacherId(currentUser);%>
   
					<form name="studentLeave" method="post" action="${pageContext.request.contextPath}/StudentLeaveServlet" onsubmit="return checkFormErrors();">

					<!--  Student Id  -->
   					<div>
   						<label>Student Roll No: <span class="error_msg">*</span></label>
   						<input type="number" min="1" name="student_roll_no" id="student_roll_no" tabindex="1"><br>
   					</div>
   		
   					<!-- Leave duration -->
	   				<div> 
	   					<label>Leave Duration: <span class="error_msg">*</span></label>
	   		    		<input type="radio" name="leave_duration" id="leave_duration1" value="OneDay" tabindex="2" style="width: 9%;">One Day Leave
	   		    		<input type="radio" name="leave_duration" id="leave_duration2" value="MoreThanOneDay" tabindex="3" style="width: 9%;">More than one day
					</div>
		
   					<!--  Leave Dates -->
       				<div>
	   	   				<label>Leave Start Date: <span class="error_msg">*</span></label>
	   	   				<input type="text" name="leave_start_date"id="leave_start_date" tabindex="4">
   					</div>
	   
  					<div>
	   					<label>Leave End Date: <span class="error_msg">*</span></label>
					    <input type="text" name="leave_end_date" id="leave_end_date" tabindex="5">
				    </div>
					   
					   <!-- Leave Reason -->
			   		<div>
					   		<label>Reason for leave: <span class="error_msg">*</span></label>
					   		<textarea rows="5" cols="10" name="reason_for_leave" id="reason_for_leave" tabindex="6"></textarea> <br>
				    </div>
					   
					   <!-- Hidden fields -->
					   <div>
					   		<input id="student_classid" type="hidden" name="student_classid" value=<%=classId%>>
					   </div>
					   
					   <div>
					  		<center> <input type="submit" value="Submit" name="submit" class="button" tabindex="7"> </center>
					  </div>
					  
				</form>
			</div>
		</div>		
	</div>
	
		<!-- Sidebar -->
		<div id="sidebar">

			<!-- Sidebar Header - Logo & Name -->
			<jsp:include page="../common/sidebarHeader.jsp" />

			<jsp:include page="teacherMenu.jsp" />

			<!-- Sidebar Footer Content -->
			<jsp:include page="../common/sidebarFooter.jsp" />

		</div>

	</div>	
	<script type="text/javascript">
		$(function(){
			$("#manageStudentLeave").addClass("current_page_item");
		});
		
		$(".submit_errors_msg").hide();
		$(".submit_errors").hide();
		
		function checkFormErrors(){
			if(isAnyFieldEmpty($('#student_roll_no'),$('#leave_start_date'),$('#reason_for_leave'))){
				if ($('input[name=leave_duration]:checked').length > 0) {
					return true;
				}
				$('#submit_is_field_empty').addClass('error_msg');
	        	$(".submit_errors_msg").show();
	        	$('#submit_is_field_empty').show();
			}
			return false;
		}
	</script>
	
	
		<script type="text/javascript">
			$("input[name='leave_duration']").click(function(){
				var total_leave = $("input[name='leave_duration']:checked").val();
				if(total_leave == "OneDay") {
					var blank = "";
					$("#leave_end_date").val(blank);
					$("#leave_end_date").prop("disabled",true);
				}else if(total_leave == "MoreThanOneDay"){
					$("#leave_end_date").prop("disabled",false);
				}
			});
		</script>

</body>
</html>